 <template>
 	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
 		<view :style="{ height: navTop + 'px' }"></view>
 		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
 			v-show="!hiddenModel">
 			<text>关键词创作</text>
 		</view>
 		<view class="flex-start-center " style="color:#333333" @click="navBack()">

 			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
 			<text style="color: 333333;font-size: 33rpx;"> 关键词创作</text>
 		</view>
 		<view class="margin-bottom_30rpx">

 		</view>
 		<uv-steps :current="current" dot>
 			<uv-steps-item title="第一步" desc="配置文案内容"></uv-steps-item>
 			<uv-steps-item title="第二步" desc="选择视频素材"></uv-steps-item>
 			<uv-steps-item title="第三步" desc="配置视频样式"></uv-steps-item>
 		</uv-steps>

 		<block v-if="current==0">
 			<view class="videoCopywriting">
 				<view class="flex-between">
 					<view class="font-weight_bold" style="font-size: 34rpx;">
 						文案生成
 					</view>



 				</view>
 				<view class="margin-top_30rpx" v-for="(item,index) in copyTypeInfo.content" :key="index">
 					<view class="flex-between">
 						<view class="font-size_28rpx font-weight_bold margin-bottom_20rpx">
 							{{'文案'+(Number(index)+1)}}
 						</view>
 						<view class="flex-start-center" @click="paste(item)">
 							<text style="color: #999999;">复制</text>
 							<image class="copyImg margin-left_10rpx" :src="copyTwo" mode="widthFix"></image>


 						</view>
 					</view>
 					{{item}}
 					<view class="padding-bottom_30rpx border-bottom-ECECEC">
 						<view class="flex-start margin-top_20rpx">
 							<view class="flex " @click="editFn(item,index)">
 								<image class="editImg " :src="group3182" mode=""></image>
 								<view class="margin-left_10rpx" style="color: rgba(91, 136, 255, 1);">
 									手动编辑
 								</view>



 							</view>
 							<view class="flex margin-left_10rpx" @click="delFn(index)">
 								<image class="editImg margin-left_10rpx" :src="del" mode=""></image>
 								<view class="margin-left_10rpx" style="color: #FF3A3A;">

 									删除文案
 								</view>





 							</view>

 						</view>
 					</view>
 				</view>





 			</view>


 		</block>
 		<block v-if="current==1">
 			<!-- 	<view class="list-public"
 				style="background: linear-gradient(180.00deg, rgba(32, 255, 134, 1),rgba(23, 23, 23, 1) 100%);">
 				<view class="display-a">
 					<view @click="getType(1)" :class="type == 1 ? 'type-1' : 'type-2'">网络提取</view>
 					<view @click="getType(2)" :class="type == 2 ? 'type-1' : 'type-2'">本地提取</view>
 				</view>
 			</view> -->
 			<view class="margin-top_50rpx ">

 				<view class="flex-between"
 					style="background: linear-gradient(180.00deg, rgb(246, 238, 255), rgba(244, 245, 247, 0) 100%);border-radius: 20rpx 20rpx 0rpx 20rpx;">
 					<view style="" class="  flex" :class="tabIndex == 1 ? 'defaultLensLeft ' : 'singleLens'"
 						@click="tabSwitch(1)">
 						<view class="flex-column">
 							<text v-if="tabIndex == 1">单镜头模式</text>
 							<text style="color: #555555;" v-else>单镜头模式</text>

 							<view class="line margin-top_20rpx" style="" v-if="tabIndex == 1">
 							</view>
 							<view class=" margin-top_20rpx" style="" v-else>
 							</view>

 						</view>
 					</view>
 					<view class=" flex" :class="tabIndex == 2 ? 'defaultLensRight' : ' multiLens'"
 						@click="tabSwitch(2)">
 						<view class="flex-column">
 							<text v-if="tabIndex == 2">多镜头模式</text>
 							<text style="color: #555555;" v-else>多镜头模式</text>
 							<view class="line margin-top_20rpx" style="" v-if="tabIndex == 2">
 							</view>
 							<view class=" margin-top_20rpx" style="" v-else>
 							</view>
 						</view>

 					</view>
 					<view class=" flex" :class="tabIndex == 3 ? 'defaultLensLeft' : ' digitalPopulationBroadcast'"
 						@click="tabSwitch(3)">
 						<view class="flex-column">
 							<text v-if="tabIndex == 3">数字人口播</text>
 							<text style="color: #555555;" v-else>数字人口播</text>
 							<view class="line margin-top_20rpx" style="" v-if="tabIndex == 3">
 							</view>
 							<view class=" margin-top_20rpx" style="" v-else>
 							</view>
 						</view>

 					</view>
 				</view>
 				<view class="" style="height: 70rpx;
    background: linear-gradient(360deg,#fff,rgba(244, 245, 247, 25%) 100%);
    margin-top: -42rpx;">

 				</view>

 				<view class="background-color_FFFFFF flex-between" style="padding: 0 20rpx 15rpx;">
 					<view class="">
 						<text style="font-weight: bold;font-size: 33rpx;margin-right: 10rpx;"
 							v-if="tabIndex==2||tabIndex==1">镜头列表 </text> <text v-if="tabIndex==2"
 							style="color: #999999;font-size: 26rpx;">可选择多个镜头生成作品</text>
 					</view>
 					<view v-if="tabIndex==2" class="" style="color: #6475FF;" @click="AddLens()">
 						添加镜头
 					</view>
 				</view>


 				<view class="list-public" v-if="tabIndex==1" @click="selSolder(0,1)">
 					<view class="margin-bottom_20rpx">
 						选择素材
 						<span class="red-dot">*</span>
 					</view>

 					<view class="display-a input-name" style="width: 650rpx;">
 						<input type="text" style="width: 560rpx;" v-model="singleLensObj.title" disabled
 							placeholder="请选择您的视频素材" placeholder-class="placeholder" />
 						<image class="matrix-20" :src="matrix20"></image>
 					</view>

 					<view class="flex-between-start">
 						<view class="margin-top_30rpx AiDubbing flex-column margin-right_30rpx" @click="aiDubbing()"
 							v-if="isEmptyAiDubbingObj">
 							<image class="aiDubbingImg margin-bottom_20rpx" :src="group3184" mode=""></image>
 							<text>AI配音</text>

 						</view>

 						<view class="margin-top_30rpx AiDubbing flex-column " @click="changeMusicFn()"
 							v-if="!showMusic">
 							<image class="aiDubbingImg margin-bottom_20rpx" :src="group3234Three" mode=""></image>
 							<text>背景音乐</text>

 						</view>
 					</view>


 				</view>

 				<view class="list-public" v-if="tabIndex==2">


 					<view class="multiLensList flex-between margin-top_20rpx" v-for="(item,index) in multiLensList"
 						:key="index">
 						<view class="flex-start-center">
 							<image class="multiLensImg" :src="group3190" mode=""></image>

 							<view class="flex-columns margin-left_16rpx">
 								<view class="font-weight_bold" v-if="item.title">
 									{{item.title}}
 								</view>
 								<view class="font-weight_bold" v-else>
 									镜头{{ index + 1 }}
 								</view>
 								<view class="flex-start-center " style="margin-top: 7rpx;" @click="selSolder(index,2)">
 									<view class="font-size_24rpx font-overflow"
 										style="color: #999999;max-width: 300rpx;">
 										{{item.name?item.name:"请选择文件夹"}}

 									</view>
 									<uni-icons style="margin-top: 7rpx;" color="#999999" type="right"
 										size="18"></uni-icons>
 								</view>
 							</view>

 						</view>

 						<view class="flex-start-center">
 							<image class="icon" :src="group3189" mode="" @click="selSolder(index,2)"></image>
 							<image class="icon margin_0_20rpx" :src="group3188" mode="" @click="edit(index)">
 							</image>
 							<image v-if="index!=0" class="icon" :src="group3187" mode="" @click="delMultiLens(index)">
 							</image>
 						</view>
 					</view>
 					<view class="flex-between-start">
 						<view class="margin-top_30rpx AiDubbing flex-column margin-right_30rpx" @click="aiDubbing()"
 							v-if="isEmptyAiDubbingObj">
 							<image class="aiDubbingImg margin-bottom_20rpx" :src="group3184" mode=""></image>
 							<text>AI配音</text>

 						</view>

 						<view class="margin-top_30rpx AiDubbing flex-column " @click="changeMusicFn()"
 							v-if="!showMusic">
 							<image class="aiDubbingImg margin-bottom_20rpx" :src="group3234Three" mode=""></image>
 							<text>背景音乐</text>

 						</view>
 					</view>

 				</view>

 				<view class="" v-if="showMusic&&tabIndex!=3">
 					<view class="font-weight_bold margin_25rpx_0" style="font-size: 34rpx;">
 						视频背景音乐
 					</view>

 					<view class="backgroundMusic flex-between">
 						<view class="flex-start-center" v-if="musicObj">
 							<view class="" @click="trialListeningsVideo('ck')">
 								<image v-if="isPlayVideo==1" class="musicImg" :src="group3199" mode=""></image>
 								<image v-else class="musicImg" :src="group3198" mode=""></image>


 							</view>
 							<view class="margin-left_16rpx " v-if="musicObj">
 								<view class="font-weight_bold font-overflow" style="width: 300rpx;">
 									{{form.bgm_id?form.bgm_id:'背景音乐'}}
 								</view>
 								<view class="flex-start-center margin-top_20rpx">
 									<view class="" style="color: #999999;">
 										时长:{{(musicObj.audition_duration?musicObj.audition_duration:0).toFixed(2)}}秒
 									</view>

 									<view class=" flex fontSize18" @click="delMusicList()">
 										<image class="delmusicImg" :src="delBg" mode=""></image>
 										<text>删除音乐</text>
 									</view>
 								</view>
 							</view>
 						</view>
 						<view class="changeMusic flex" @click="changeMusicFn()">
 							<image class="musicImg" :src="group3185" mode=""></image>
 							<text>更换音乐</text>
 						</view>


 					</view>

 				</view>
 				<view class="" v-if="!isEmptyAiDubbingObj&&tabIndex!=3&&(form.audio_type==1||form.audio_type==0)">
 					<view class="font-weight_bold margin_25rpx_0" style="font-size: 34rpx;">
 						ai配音
 					</view>
 					<view class="backgroundMusic flex-between ">
 						<view class="flex-align-center">
 							<view class="" @click="trialListenings(aiDubbingObj.voiceUrl,'ck')">
 								<image v-if="isPlay==1" class="musicImg" :src="group3199" mode=""></image>
 								<image v-else class="musicImg" :src="group3198" mode=""></image>


 							</view>

 							<view class="flex-columns margin-left_16rpx">
 								<view class="r-name">{{ aiDubbingObj.voiceName }}</view>
 								<!-- <view class="r-date">{{item.second}}|{{ item.createTime }}</view> -->

 								<!-- 	<view class="r-date">{{(aiDubbingObj.duration?aiDubbingObj.duration:0).toFixed(2)}}秒 |
 									{{ aiDubbingObj.voiceType?aiDubbingObj.voiceType :'无' }}
 								</view> -->

 								<view class="r-date">
 									{{ aiDubbingObj.voiceType?aiDubbingObj.voiceType :'无' }}
 								</view>
 							</view>
 						</view>

 						<view class="changeMusic flex" @click="aiDubbing()">
 							<image class="musicImg" :src="group3360Sever" mode=""></image>
 							<text>更换配音</text>
 						</view>
 
 						<!-- <view class="flex-align-center try-listening-cls" >
							<iamge></iamge>
							<view style="color: #fff;">试听</view>
						</view> -->
 					</view>
 				</view>
				<view class="" v-if="form.audio_type==2&&form.mode!=3">
					<view class="font-weight_bold margin_25rpx_0" style="font-size: 34rpx;">
						我的音色
					</view>
					<view class="backgroundMusic flex-between ">
						<view class="flex-align-center">
							<view class="" @click="trialListeningsTimbre(aiTimbreObj.voiceUrl,'ck')">
								<image v-if="isPlayTimbre==1" class="musicImg" :src="group3199" mode=""></image>
								<image v-else class="musicImg" :src="group3198" mode=""></image>
				
				
							</view>
				
							<view class="flex-columns margin-left_16rpx">
								<view class="r-name">{{ aiTimbreObj.name }}</view>
								<!-- <view class="r-date">{{item.second}}|{{ item.createTime }}</view> -->
				
								<view class="r-date" v-if="aiTimbreObj.duration">
				
									{{(aiTimbreObj.duration?aiTimbreObj.duration:0).toFixed(2)}}秒
				
								</view>
							</view>
						</view>
				
						<view class="changeMusic flex" @click="aiDubbing()">
							<image class="musicImg" :src="group3360Sever" mode=""></image>
							<text>更换配音</text>
						</view>
				
						<!-- <view class="flex-align-center try-listening-cls" >
							<iamge></iamge>
							<view style="color: #fff;">试听</view>
						</view> -->
					</view>
				</view>

 				<!-- 数字人口部 -->

 				<view class="" v-if="tabIndex==3">
 					<view class="list-public">

 						<view class="flex width100 relative " v-if="!videoShowUrl">
 							<!-- <image @click.stop="videoUpload()" mode="widthFix" class="upload-img-cls" :src="szrImgBj"
							style="height: 1116.28rpx;"></image> -->


 							<view @click.stop="videoUpload()" class="upload-img-cls bordColor" style="height: 721rpx;">

 							</view>





 							<view class="upload-bj-cls flex-column">
 								<uni-icons type="plusempty" size="30"></uni-icons>
 								<view>请选择形象</view>
 								<text>点击选择已有的数字人形象</text>
 							</view>


 						</view>
 						<view class="margin-bottom_30rpx" v-else>

 							<scroll-view @scrolltolower="nextPage" scroll-view scroll-with-animation='true'
 								class="scroll-view_H" scroll-x="true">
 								<view id="im_0" class="bottom"></view>
 								<!-- <block v-for="(item,index) in imageList" :key="index"> -->
 								<view class="scroll-view-item_H flex-start-center">

 									<view class=" " style="position: relative;" v-for="(item,index) in digitalHumanArr"
 										:key="index">
 										<image class="digitalHumanImg" :src="item.video_cover" mode="aspectFill">
 										</image>

 										<image @click="delDh(index)" class="delImg" :src="nine3419" mode="aspectFill">
 										</image>
 									</view>


 								</view>



 							</scroll-view>

 							<view class="flex margin-top_30rpx" @click.stop="videoUpload()">
 								<image style="height: 32rpx; width: 32rpx;margin-right: 10rpx;" :src="nine3420"
 									mode="">
 								</image>
 								重新选择模版
 							</view>





 						</view>

 						<view class="flex-between-start" v-if="isEmptyAiTimbreObj">
 							<view class="margin-top_30rpx AiDubbing flex-column" @click="aITimbre()">
 								<image class="aiDubbingImg margin-bottom_20rpx" :src="group3184" mode=""></image>
 								<text>AI配音</text>

 							</view>

 						</view>



 					</view>


 					<view class="" v-if="tabIndex==3&&!isEmptyAiTimbreObj">
 						<view class="font-weight_bold margin_25rpx_0" style="font-size: 34rpx;">
 							我的音色
 						</view>
 						<view class="backgroundMusic flex-between ">
 							<view class="flex-align-center">
 								<view class="" @click="trialListeningsTimbre(aiTimbreObj.voiceUrl,'ck')">
 									<image v-if="isPlayTimbre==1" class="musicImg" :src="group3199" mode=""></image>
 									<image v-else class="musicImg" :src="group3198" mode=""></image>


 								</view>

 								<view class="flex-columns margin-left_16rpx">
 									<view class="r-name">{{ aiTimbreObj.name }}</view>
 									<!-- <view class="r-date">{{item.second}}|{{ item.createTime }}</view> -->

 									<view class="r-date" v-if="aiTimbreObj.duration">

 										{{(aiTimbreObj.duration?aiTimbreObj.duration:0).toFixed(2)}}秒

 									</view>
 								</view>
 							</view>

 							<view class="changeMusic flex" @click="aITimbre()">
 								<image class="musicImg" :src="group3360Sever" mode=""></image>
 								<text>更换配音</text>
 							</view>

 							<!-- <view class="flex-align-center try-listening-cls" >
							<iamge></iamge>
							<view style="color: #fff;">试听</view>
						</view> -->
 						</view>
 					</view>


 				</view>


 			</view>

 		</block>
 		<block v-if="current==2">
 			<view class="videoStyle margin-top_30rpx" style="">
 				<view class="flex-between margin-top_30rpx">
 					<view class="">
 						视频标题
 					</view>
 					<view class=""> 
 						<switch v-model="form.title_open" style="transform:scale(0.7)" 
 							:checked="form.title_open" color="#9235FF" @change="e=>switch1Change(e,1)" />
 					</view>
 				</view>
 				<view class="videoTitle flex-align-center" style="padding-left: 16rpx;" v-if="form.title_open">
 					<input v-model="form.title_value" class="" focus placeholder="请输入视频标题" />
 				</view>
 				<view class="flex-between margin-top_30rpx">
 					<view class="">
 						视频转场
 					</view>
 					<view class="">
 						<switch v-model="form.transitions_open" style="transform:scale(0.7)" color="#9235FF"
 							:checked="form.transitions_open" @change="e=>switch1Change(e,2)" />
 					</view>
 				</view>
 				<scroll-view @scrolltolower="nextPage" :scroll-y="true" style="height: 400rpx;"
 					v-if="form.transitions_open">
 					<view class="flex-wrap-flex-start-center">
 						<view class="   flex" v-for="(item,index) in transitionList " :key="index"
 							:style="(index + 1) % 4 === 0 ? 'margin: 0 0rpx 20rpx 0' : ''"
 							:class="tiePaperActive==index ?'tiePaperActive ':'tiePaper'"
 							@click="tiePaperSwitchFn(index,item)">
 							<image class="tiePaperImg" :src="item.url" mode=""></image>

 						</view>


 					</view>
 				</scroll-view>

 				<view class="flex-between margin_40rpx_0">
 					<view class="">
 						视频帖纸
 					</view>
 					<view class="">
 						<switch v-model="form.sticker_open" style="transform:scale(0.7)" :checked="form.sticker_open"
 							color="#9235FF" @change="e=>switch1Change(e,3)" />
 					</view>
 				</view>

 				<scroll-view @scrolltolower="nextPage" :scroll-y="true" style="height: 400rpx;"
 					v-if="form.sticker_open">
 					<view class="flex-wrap-flex-start-center">
 						<view class="   flex" v-for="(item,index) in stickersList " :key="index"
 							:style="(index + 1) % 4 === 0 ? 'margin: 0 0rpx 20rpx 0' : ''"
 							:class="stickerActive==index ?'tiePaperActive ':'tiePaper'"
 							@click="stickerSwitchFn(index,item)">
 							<image class="tiePaperImg" :src="item.stickersUrl" mode=""></image>

 						</view>


 					</view>
 				</scroll-view>
				<view class="flex-between margin_40rpx_0">
					<view class="">
						是否开启字幕
					</view>
					<view class="">
						<switch v-model="form.subtitle_open" style="transform:scale(0.7)" :checked="form.subtitle_open"
							color="#9235FF" @change="e=>switch1Change(e,4)" />
					</view>
				</view>

 				<view class="flex-between margin_40rpx_0">
 					<view class="">
 						标题字幕样式 
 					</view>
 					<view class="">
 						<switch v-model="form.caption_open" style="transform:scale(0.7)" 
 							:checked="form.caption_open" color="#9235FF" :disabled="isDisabled" @change="e=>switch1Change(e,5)" />
 					</view>
 				</view>
 				<scroll-view :scroll-y="true" style="height: 500rpx;width: 700rpx " v-if="form.caption_open">

 					<view class="flex-wrap-flex-start-center">
 						<view class="" v-for="(item,index) in captionList " :key="index"
 							@click="titleStyleSwitchFn(index,item)">
 							<image :class="titleStyleActive==index?'titleStyleActive':'templateCenterImg'"
 								:src="item.url" mode=""></image>

 						</view>
 					</view>

 				</scroll-view>

 				<view class="" style="height: 20rpx;">

 				</view>




 			</view>

 		</block>
 		<view class="" style="height: 200rpx;">

 		</view>
 		<sunui-popup ref="customizePop">
 			<template v-slot:content>

 				<view class="serviceItemsContain ">
 					<view class="top flex-between">
 						<view class="">

 						</view>
 						<text>自定义字数</text>
 						<uni-icons @click='closeWriteOffIcons()' class="uniIcon" type="closeempty" size="22"
 							style="color: #07070791;">
 						</uni-icons>
 					</view>

 					<view class="card margin-bottom_50rpx">
 						<view class="myNmae">

 							<view class="">
 								<input class="uni-inputsa" type="number" v-model="form.length"
 									placeholder="请输入自定义字数" />
 							</view>


 						</view>

 					</view>

 					<view class="PublishTags flex" @click="customizePopFn()">
 						确定
 					</view>

 				</view>

 			</template>
 		</sunui-popup>
 		<sunui-popup ref="serviceItemsPopup">
 			<template v-slot:content>

 				<view class="serviceItemsContain ">
 					<view class="top flex-between">
 						<view class="">

 						</view>
 						<text>编辑镜头名称</text>
 						<uni-icons @click='closeWriteOffIcon()' class="uniIcon" type="closeempty" size="22"
 							style="color: #07070791;">
 						</uni-icons>
 					</view>

 					<view class="card margin-bottom_50rpx">
 						<view class="myNmae">

 							<view class="">
 								<input class="uni-inputsa" type="text" v-model="selIndexName" placeholder="请输入镜头名称" />
 							</view>


 						</view>

 					</view>

 					<view class="PublishTags flex" @click="payNow()">
 						确定
 					</view>

 				</view>

 			</template>
 		</sunui-popup>
 		<sunui-popup ref="videoNum">
 			<template v-slot:content>

 				<view class="serviceItemsContain ">
 					<view class="top flex-between">
 						<view class="">

 						</view>
 						<text>视频数量</text>
 						<uni-icons @click='closeVideoNum()' class="uniIcon" type="closeempty" size="22"
 							style="color: #07070791;">
 						</uni-icons>
 					</view>
 					<view class="flex-between margin-top_30rpx">
 						<text class="font-weight_bold">当前算力{{user.balance}}</text>
 						<view class="" @click="goRecharge()" v-if="Number(user.balance<=0)&&memberSetObj.is_open==1">

 							<text style="color: 333333;font-size: 33rpx;color: #6475FF;"> 去充值</text>
 							<uni-icons style="margin-top: 7rpx;" color="#6475FF" type="right" size="17"></uni-icons>
 						</view>
 					</view>

 					<view class="card margin-bottom_50rpx">
 						<view class="myNmae">

 							<view class="">
 								<input class="uni-inputsa" type="number" @input="keyWorderInput(form.video_count)"
 									v-model="form.video_count" placeholder="请输入视频数量" />
 							</view>


 						</view>

 					</view>

 					<view class="font-size_26rpx padding-bottom_40rpx">
 						提示：建议最大生成{{videoNum}}个视频 (不可超过当前最大数量)
 					</view>

 					<view class="PublishTags flex" @click="videoNumBtn()">

 						提交任务 {{'('+"算力："+(tallySetKeyword_tally).toFixed(2)+')'}}
 					</view>

 				</view>

 			</template>
 		</sunui-popup>
 		<sunui-popup ref="copywritingNum">
 			<template v-slot:content>

 				<view class="serviceItemsContain ">
 					<view class="top flex-between">
 						<view class="">

 						</view>
 						<text>修改文案</text>
 						<uni-icons @click='closeWriting()' class="uniIcon" type="closeempty" size="22"
 							style="color: #07070791;">
 						</uni-icons>
 					</view>

 					<view class="textarea-box ">
 						<textarea placeholder-style="font-size:30rpx;" v-model="copywriting" placeholder="修改文案"
 							maxlength="500" style="height: 360rpx;background-color: #F6F8FF;" />
 					</view>






 					<view class="PublishTags flex" @click="copywritingBtn()">
 						确定
 					</view>

 				</view>

 			</template>
 		</sunui-popup>
 		<view class="bgBtn">
 			<view class="c-save flex" v-if="current==0" @click="navBack()">
 				保存退出
 			</view>
 			<view class="c-save flex" v-if="current==1||current==2" @click="previousStep(current)">
 				上一步
 			</view>
 			<view v-if="current!=2" class="c-but flex" @click="but(current)">
 				{{(tabIndex==3)? current==1?'提交数字人口播 ':'下一步':'下一步'}}
 			</view>

 			<view v-else class="c-but flex" @click="CbutCk()">提交任务</view>
 		</view>




 	</view>
 </template>

 <script>
 	const innerAudioContext1 = uni.createInnerAudioContext();
 	const innerAudioContext2 = uni.createInnerAudioContext();
 	export default {
 		data() {
 			return {
 				videoShowUrl: false,
 				copywriting: '',
 				digitalHumanArr: [],
 				del: this.$imgs.del,
 				nine3419: this.$imgs.nine3419,
 				nine3420: this.$imgs.nine3420,
 				group3360Sever: this.$imgs.group3360Sever,
 				group3359Sever: this.$imgs.group3359Sever,

 				group3186: this.$imgs.group3186,
 				group3198: this.$imgs.group3198,
 				group3177: this.$imgs.group3177,
 				group3188: this.$imgs.group3188,
 				group3189: this.$imgs.group3189,
 				copyTwo: this.$imgs.copyTwo,
 				group3197: this.$imgs.group3197,
 				group3184: this.$imgs.group3184,
 				group3199: this.$imgs.group3199,
 				group3185: this.$imgs.group3185,
 				group3190: this.$imgs.group3190,
 				group3187: this.$imgs.group3187,
 				tiePaperTwo: this.$imgs.tiePaperTwo,
 				group3183: this.$imgs.group3183,
 				group3182: this.$imgs.group3182,
 				group21: this.$imgs.group21,
 				delBg: this.$imgs.delBg,
 				group3234Three: this.$imgs.group3234Three,
 				memberSetObj: {},

 				tallySetKeyword_tally: 0,



 				hiddenModel: true, //显示影藏
 				opacityStyle: 0, //透明度
 				heightSystemss: "",
 				showMusic: false,

 				groupList: [{
 					id: 26,
 					groupName: '测试'

 				}],

 				videoTransitions: false,

 				titleStyle: true,

 				tabIndex: 1,
 				navTop: '',
 				materialBg: this.$imgs.violet,

 				matrix20: 'https://yuntt.weijuyunke.com/yunttXcxImage/matrix/20.png',
 				current: 0,
 				// 1.播放 2.停止播放
 				isPlay: 2,
 				// 1.播放 2.停止播放
 				isPlayVideo: 2,
 				// 1.播放 2.停止播放
 				isPlayTimbre: 2,

 				multiLensList: [{
 					id: 0,
 					name: ''
 				}],
 				tiePaperActive: 0,
 				titleStyleActive: 0,
 				stickerActive: 0,
 				aiDubbingObj: {},
 				musicObj: {},
 				singleLensObj: {},
 				queryPage: {
 					psize: 10,
 					page: 1

 				},
 				total: 20,
 				stickersList: [],
 				captionList: [],
 				transitionList: [],
 				stMusicUrl: '',
 				demoDub_url: false,
 				testContent: ['秋天的公园里，落叶铺满了小路，踏上去有种说不出的舒爽，偶然间抬头，那抹深秋的蓝天格外高远、明净。'],
				isDisabled:true,


 				form: {
 					dub_voice: '',
 					dub_url: '',
 					bgm_id: '',
 					// 1-爆款拆剪 2-关键词创造 3-热点创作
 					type: '2',
 					// id
 					id: '',
 					uid: uni.getStorageSync('uid'),
 					// 文案内容
 					content: '',
 					// 背景音乐
 					bgm: '',
 					// 背景音乐音量
 					bgm_volume: 0.2,
 					// ai 配音
 					dub: "",
 					// 1-单素材模式 2-多镜头模式
 					mode: "1",
 					// 素材库文件夹id
 					resource_folder_id: '',
 					// 多镜头列表
 					lens_str: [],
 					// 视频标题 0-未开启 1-开启
 					title_open: true,
 					// 视频标题
 					title_value: '',
 					//  视频转场 0-未开启 1-开启
 					transitions_open: true,
 					// 视频转场
 					transitions_value: '',
 					// 视频贴纸 0-未开启 1-开启
 					sticker_open: true,
 					// 视频贴纸
 					sticker_value: '',
 					// 标题字幕样式 0-未开启 1-开启
 					caption_open: true,
 					// 标题字幕样式
 					caption_value: '',
 					// 视频数量
 					video_count: '',
 					// 最后一步提交合成传1
 					is_submit: 1,
 					avatar_id: '',
 					// 数字人音色id
 					voice_id: '',
 					// 数字人声音id
 					sound_id: '',
 					dub_value: '',
					audio_type:0,
					
					subtitle_open:true



 				},
 				totNum: 0,
 				copyTypeInfo: {},
 				// 编辑索引
 				editIndex: 0,
 				previewUrl: '',
 				selIndex: 0,
 				selIndexName: '',
 				videoNum: 0,
 				aiTimbreObj: {},
 				avatarIdArr: [],
 				tallySet: uni.getStorageSync('tallySet'),
 				user: uni.getStorageSync('user'),






 			}
 		},
 		onPageScroll(ev) {


 			if (ev.scrollTop > 10) {
 				let opacity = ev.scrollTop / 140

 				// this.opacityStyle = opacity > 1 ? 1 : opacity
 				this.opacityStyle = 1
 				this.hiddenModel = false
 				// this.createdgetSystemInfo();

 			} else {
 				this.hiddenModel = true
 			}
 		},

 		onLoad(options) {
 			const app = getApp();
 			this.navTop = app.globalData.navTop;

 			this.stickersListFn()
 			this.captionListFn()
 			this.transitionListFn()
 			this.createdgetSystemInfo()

 			this.userInfos()
 			this.tallySetFn()
 			this.memberSetFn()
 			// console.log(options) JSON.parse(decodeURIComponent(options.obj))



 			if (options.obj) {
 				this.copyTypeInfo = JSON.parse((decodeURIComponent(options.obj)));
 				this.form.content = this.copyTypeInfo.content

 				this.form.id = this.copyTypeInfo.id
 				this.form.mode = 1

 			} else {
 				this.copyTypeInfo = JSON.parse((decodeURIComponent(options.objs)));


 				this.$sun.assignObject(this.form, {
 					...this.copyTypeInfo
 				})
				
				this.form.video_count=0

 				this.form.is_submit = 1
 				this.form.type = 2
 				if (this.form.caption_value) {
 					this.form.caption_value = JSON.parse(this.form.caption_value)
 				}
 				if (this.form.mode == 0) {
 					this.form.mode = 1
 				}

 				if (this.form.mode == 1) {
 					this.form.lens_str = []

 					this.folderPageFn()
 				} else if (this.form.mode == 2) {


 					this.multiLensList = JSON.parse(JSON.stringify(this.form.lens_str))

 					this.folderPageFn(this.multiLensList)

 				} else {
 					this.avatarListFn()
 				}

 				if (this.form.video_count) {
 					this.tallySetKeyword_tally = Number(this.tallySet.keyword_tally) * Number(this.form.video_count)
 				} else {
 					this.tallySetKeyword_tally = Number(this.tallySet.keyword_tally)
 				}


 				if (!this.form.dub) {
 					this.aiDubbingObj = {}
 				}
 				if (this.form.mode == 3) {
 					if (this.form.dub_url) {
 						this.aiTimbreObj.voiceUrl = this.form.dub_url;
 					}
 					if (this.form.dub_voice) {
 						this.aiTimbreObj.name = this.form.dub_voice;
 					}












 					this.$nextTick(() => {

 						innerAudioContext1.src = this.aiTimbreObj.voiceUrl;
 						setTimeout(() => {

 							if (this.aiTimbreObj.voiceUrl) {

 								console.log(innerAudioContext1.duration)
 								this.$set(this.aiTimbreObj, 'duration', innerAudioContext1.duration);
 							}

 						}, 500)
 					})
 				} else {
					
					if(this.form.audio_type==2){
						if (this.form.dub_url) {
							this.$set(this.aiTimbreObj, 'voiceUrl', this.form.dub_url);
						}
						if (this.form.dub_voice) {
							this.$set(this.aiTimbreObj, 'name', this.form.dub_voice);
						}
						
						
						
						this.$nextTick(() => {
							innerAudioContext1.src = this.form.dub_url;
							setTimeout(() => {
								if (this.form.dub_url) {
						
									console.log(innerAudioContext1.duration)
									this.$set(this.aiTimbreObj, 'duration', innerAudioContext1.duration);
								}
						
							}, 1500)
						})
						
						console.log(this.aiTimbreObj)
						
					}
					
					
					
 					if (this.form.dub_url) {
 						this.aiDubbingObj.voiceUrl = this.form.dub_url;
 					}

 					if (this.form.dub_voice) {
 						this.aiDubbingObj.voiceName = this.form.dub_voice;
 					}





 					this.$nextTick(() => {
 						innerAudioContext1.src = this.aiDubbingObj.voiceUrl;
 						setTimeout(() => {

 							if (this.aiDubbingObj.voiceUrl) {

 								console.log(innerAudioContext1.duration)
 								this.$set(this.aiDubbingObj, 'duration', innerAudioContext1.duration);
 							}


 						}, 500)
 					})


 				}





 				if (this.form.mode != 3) {
 					this.musicBgm()

 				}
 				console.log(this.multiLensList)


 				this.tabIndex = this.form.mode


 				console.log(this.form, 'this。form')


 			}








 		},
 		onUnload() {
 			console.log('页面隐藏');
 			// 在这里执行需要的操作
 			this.isPlay = 1;

 			this.isPlayVideo = 1;
			this.isPlayTimbre = 1

 			this.trialListenings(this.aiDubbingObj.voiceUrl);
 			//播放音频
 			this.trialListeningsVideo();

 			if (this.demoDub_url) {

 				this.trialListeningsTimbre(this.demoDub_url);
 			} else {
 				this.isPlayTimbre = 2
 			}

 		},

 		onHide() {
 			// 页面隐藏时调用
 			console.log('页面隐藏');
 			// 在这里执行需要的操作
 			this.isPlay = 1;

 			this.isPlayVideo = 1;
			this.isPlayTimbre = 1
 			//播放音频
 			this.trialListenings(this.aiDubbingObj.voiceUrl);
 			//播放音频
 			this.trialListeningsVideo();

 			if (this.demoDub_url) {

 				this.trialListeningsTimbre(this.demoDub_url);
 			} else {
 				this.isPlayTimbre = 2
 			}
 		},
 		computed: {
 			isEmptyAiDubbingObj() {
 				return Object.keys(this.aiDubbingObj).length === 0;
 			},

 			isEmptyAiTimbreObj() {
 				return Object.keys(this.aiTimbreObj).length === 0
 			}


 		},
 		methods: {
 			keyWorderInput(e) {

 				if (e) {
 					console.log(e)

 					this.tallySetKeyword_tally = Number(this.tallySet.keyword_tally) * Number(e)

 				} else {
 					this.tallySetKeyword_tally = Number(this.tallySet.keyword_tally)
 				}

 			},
 			async memberSetFn() {
 				const result = await this.$http.get({
 					url: this.$api.memberSet,
 					data: {


 					}
 				});
 				if (result.errno == 0) {

 					this.memberSetObj = result.data

 					console.log(result.data)

 				}
 			},

 			async templateTpo() {
 				if (uni.getStorageSync("templateSet").balance_change_template || uni.getStorageSync(
 						"templateSet").generate_success_template || uni.getStorageSync(
 						"templateSet").generate_fail_template) {

 					wx.requestSubscribeMessage({
 						tmplIds: [uni.getStorageSync("templateSet").balance_change_template, uni
 							.getStorageSync(
 								"templateSet").generate_success_template, uni.getStorageSync(
 								"templateSet").generate_fail_template
 						],
 						success: res => { //成功、
 							if (res[Object.keys(res)[0]] == "accept") {
 								console.log(res)
 								// this.$sun.toast("成功订阅")
 							} else {
 								uni.showModal({
 									title: "温馨提示",
 									content: "点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅"
 								})
 							}
 						},
 						fail: err => { //失败
 							this.$sun.toast("订阅消息配置失败");
 						}
 					})
 				}


 			},

 			async userInfos() {
 				const result = await this.$http.get({
 					url: this.$api.userInfo,
 					data: {
 						// 用户id
 						uid: uni.getStorageSync('uid'),
 						// 上级id
 						// pid: ''
 					}
 				});
 				if (result.errno == 0) {
 					this.user = result.data;

 					uni.setStorageSync('user', result.data);


 				}
 			},
 			async tallySetFn() {
 				const result = await this.$http.get({
 					url: this.$api.tallySet,

 				});
 				if (result.errno == 0) {
 					console.log(result.data)

 					uni.setStorageSync('tallySet', result.data);







 				} else {
 					this.$sun.toast(result.message, 'none')
 				}
 			},
 			async avatarListFn() {
 				const result = await this.$http.post({
 					url: this.$api.avatarList,
 					data: {
 						uid: uni.getStorageSync("uid"),




 						is_status: 2,

 					}
 				});
 				if (result.errno == 0) {
 					this.avatarIdArr = this.form.avatar_id.split(',').map(Number)
 					if (this.form.mode == 3) {
 						this.avatarIdArr.forEach((item, index) => {

 							let res = result.data.find(item1 => item == item1.id)
 							console.log(res)
 							if (res) {
 								this.videoShowUrl = true
 								this.digitalHumanArr.push(result.data[index])

 							}

 						})


 						if (this.avatarIdArr.length != this.digitalHumanArr.length) {
 							this.avatarIdArr = this.avatarIdArr.filter(item => this.digitalHumanArr.some(obj => obj
 								.id === item));
 						}

 						console.log(this.avatarIdArr, this.digitalHumanArr)

 						this.videoNum = Number(this.digitalHumanArr.length) * Number(this.form.content.length)





 					}
 				}
 			},

 			// 音色

 			aiTimbreFuns(item) {
 				this.aiTimbreObj = JSON.parse(item).aiTimbreObj
 				console.log(this.aiTimbreObj, '=========================')

 				this.form.voice_id = this.aiTimbreObj.id

 				this.form.audio_type = this.aiTimbreObj.audio_type

 				if (this.aiTimbreObj.demo) {
 					this.form.dub_url = this.aiTimbreObj.demo;
 					this.demoDub_url = true;
 					innerAudioContext2.src = this.aiTimbreObj.demo;
 				} else {
 					this.form.dub_url = this.aiTimbreObj.voice_urls[0];
 					this.demoDub_url = false
 					innerAudioContext2.src = this.aiTimbreObj.voice_urls[0];
 				}
 				this.form.dub_voice = this.aiTimbreObj.name;


 				this.$nextTick(() => {
 					setTimeout(() => {
 						console.log(innerAudioContext2.duration)

 						this.$set(this.aiTimbreObj, 'duration', innerAudioContext2.duration);
 						this.aiTimbreObj.duration = innerAudioContext2.duration

 					}, 600)
 				})
 			},
 			async voiceSetDemoFn(voice_id, sound_id) {
 				const result = await this.$http.post({
 					url: this.$api.voiceSetDemo,
 					data: {
 						uid: uni.getStorageSync('uid'),

 						voice_id: voice_id,
 						sound_id: sound_id
 					}
 				});
 				if (result.errno == 0) {
 					console.log(result.data)

 					this.stMusicUrl = result.data
 					innerAudioContext2.src = result.data;
 					console.log(innerAudioContext2)
 					this.$forceUpdate()
 					if (this.isPlayTimbre == 2) {
 						this.isPlayTimbre = 1;
 						innerAudioContext2.play();
 						innerAudioContext2.onPlay(() => {
 							console.log('开始播放');
 						});
 						innerAudioContext2.onEnded(() => {
 							this.isPlayTimbre = 2;

 							innerAudioContext2.pause();
 							// this.$sun.toast("音频播放完成");
 							console.log('音频播放结束：');
 						});
 						innerAudioContext2.onError(err => {
 							innerAudioContext2.destroy();
 							console.log('播放音频出错：', err);
 						});
 					} else {
 						this.isPlayTimbre = 2;
 						innerAudioContext2.pause();
 						innerAudioContext2.onPause(() => {
 							console.log('暂停播放');
 						});
 						console.log('暂停播放');
 					}



 				} else {
 					this.$sun.toast(result.message, 'none');
 				}
 			},
 			async soundSaveFn() {
 				let totalDeduction = ((this.testContent[0].length / 100) * this.tallySet.sound_tally).toFixed(2);
 				if (totalDeduction < 100) {
 					totalDeduction = this.tallySet.sound_tally; // 如果次数小于100，直接扣50点
 				}

 				if (Number(this.user.balance) <= Number(totalDeduction)) {
 					this.$sun.toast('每一百字扣 ' + this.tallySet.sound_tally + '算力,当前算力不足无法提交', 'none')
 					return
 				}
 				uni.showLoading({
 					title: '加载中...',
 					mask: true
 				});
 				const result = await this.$http.post({
 					url: this.$api.soundSave,
 					data: {
 						uid: uni.getStorageSync('uid'),
 						type: 2,
 						task_id: this.id,
 						voice_id: this.form.voice_id,
 						msg: this.testContent
 					}
 				});
 				if (result.errno == 0) {
 					console.log(this.form.voice_id, result.data)
 					uni.hideLoading()
 					this.voiceSetDemoFn(this.form.voice_id, result.data)


 				} else {
 					setTimeout(() => {
 						this.$sun.toast(result.message, 'none')
 					}, 200)
 					uni.hideLoading()
 				}
 			},
 			trialListeningsTimbre(url, ck) {



 				if (!this.demoDub_url) {
 					this.soundSaveFn()
 				} else {
 					innerAudioContext2.src = this.form.dub_url
 					console.log(innerAudioContext2)

 					if (ck) {
 						this.isPlayVideo = 2

 						// 1.播放 2.停止播放
 						this.isPlay = 2
 					}

 					this.$forceUpdate()
 					if (this.isPlayTimbre == 2) {
 						this.isPlayTimbre = 1;
 						innerAudioContext2.play();
 						innerAudioContext2.onPlay(() => {
 							console.log('开始播放');
 						});
 						innerAudioContext2.onEnded(() => {
 							this.isPlayTimbre = 2;

 							innerAudioContext2.pause();
 							// this.$sun.toast("音频播放完成");
 							console.log('音频播放结束：');
 						});
 						innerAudioContext2.onError(err => {
 							innerAudioContext2.destroy();
 							console.log('播放音频出错：', err);
 						});
 					} else {
 						this.isPlayTimbre = 2;
 						innerAudioContext2.pause();
 						innerAudioContext2.onPause(() => {
 							console.log('暂停播放');
 						});
 						console.log('暂停播放');
 					}
 				}

 			},
 			// 音色
 			aITimbre() {
 				this.$sun.navGo('/pages/digitalHuman/selectTimbre')
 			},
 			delDh(index) {
 				uni.showModal({
 					title: '是否确定要删除',
 					content: '是否需要删除数字人形象',
 					success: async (res) => {
 						if (res.confirm) {



 							this.digitalHumanArr.splice(index, 1);
 							this.avatarIdArr.splice(index, 1);
 							this.form.avatar_id = this.avatarIdArr.length == 1 ? this.avatarIdArr[0] : this
 								.avatarIdArr.join(',');

 							console.log(this.form.avatar_id)

 							if (!this.form.avatar_id) {
 								this.videoShowUrl = false
 							}
 							// 还要吧对应的
 						} else if (res.cancel) {
 							console.log(this.form.avatar_id, this.avatarIdArr)
 						}
 					}
 				});
 			},
 			videoUpload() {
 				this.$sun.navGo('/pages/digitalHuman/selCloneList')
 			},



 			createdgetSystemInfo() {
 				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
 				uni.getSystemInfo({
 					//获取系统信息
 					success: res => {
 						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
 							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
 						this.heightSystemss = navHeight;
 						console.log(navHeight, '==========================')

 					},
 					fail(err) {
 						console.log(err);
 					}
 				});
 			},

 			async getVideoCountFn(projectId) {
 				const result = await this.$http.get({
 					url: this.$api.getVideoCountSc,
 					data: {
 						uid: uni.getStorageSync("uid"),
 						resource_folder_id: projectId
 					}
 				});
 				if (result.errno == 0) {
 					console.log(result.data)
 					if (result.data) {
 						this.videoNum = result.data

 						if (this.form.video_count) {
 							this.tallySetKeyword_tally = Number(this.tallySet.keyword_tally) * Number(this.form
 								.video_count)
 						} else {
 							this.tallySetKeyword_tally = Number(this.tallySet.keyword_tally)
 						}
 					} else {

 					}
 				} else {

 					this.$sun.toast(result.message, 'none')
 				}
 			},
 			async getVideoCountFnM() {
 				const result = await this.$http.post({
 					url: this.$api.getMuchFragmentCount,
 					data: {
 						uid: uni.getStorageSync("uid"),
 						dub: this.form.dub,
 						lens_str: this.form.lens_str,
 						type: 1,
						audio_type:this.form.audio_type,
						sound_id:this.form.sound_id

 					}
 				});
 				if (result.errno == 0) {
 					console.log(result.data)
 					if (result.data) {
 						this.videoNum = result.data
 						if (this.form.video_count) {
 							this.tallySetKeyword_tally = Number(this.tallySet.keyword_tally) * Number(this.form
 								.video_count)
 						} else {
 							this.tallySetKeyword_tally = Number(this.tallySet.keyword_tally)
 						}
 					} else {

 					}
 				} else {

 					this.$sun.toast(result.message, 'none')
 				}
 			},
 			musicBgm() {
 				if (this.form.bgm) {



 					innerAudioContext2.src = this.form.bgm;


 					this.$nextTick(() => {
 						setTimeout(() => {

 							console.log(innerAudioContext2.duration)
 							this.$set(this.musicObj, 'audition_duration', innerAudioContext2.duration);
 							// this.musicObj.audition_duration = 
 						}, 1000)
 					})





 					this.showMusic = true


 				}
 			},

 			trialListeningsVideo(ck) {

 				innerAudioContext2.src = this.form.bgm ? this.form.bgm : this.musicObj?.play_url?.uri;
 				console.log(innerAudioContext2)
 				if (ck) {
 					this.isPlay = 2

 					// 1.播放 2.停止播放
 					this.isPlayTimbre = 2
 				}
 				this.$forceUpdate()
 				if (this.isPlayVideo == 2) {
 					this.isPlayVideo = 1;
 					innerAudioContext2.play();
 					innerAudioContext2.onPlay(() => {
 						console.log('开始播放');
 					});
 					innerAudioContext2.onEnded(() => {
 						this.isPlayVideo = 2;

 						innerAudioContext2.pause();
 						// this.$sun.toast("音频播放完成");
 						console.log('音频播放结束：');
 					});
 					innerAudioContext2.onError(err => {
 						innerAudioContext2.destroy();
 						console.log('播放音频出错：', err);
 					});
 				} else {
 					this.isPlayVideo = 2;
 					innerAudioContext2.pause();
 					innerAudioContext2.onPause(() => {
 						console.log('暂停播放');
 					});
 					console.log('暂停播放');
 				}
 			},
 			trialListenings(url, ck) {
 				this.previewUrl = url
 				console.log(url)
 				innerAudioContext2.src = this.previewUrl;
 				console.log(innerAudioContext2)
 				if (ck) {
 					this.isPlayVideo = 2

 					// 1.播放 2.停止播放
 					this.isPlayTimbre = 2
 				}

 				this.$forceUpdate()
 				if (this.isPlay == 2) {
 					this.isPlay = 1;
 					innerAudioContext2.play();
 					innerAudioContext2.onPlay(() => {
 						console.log('开始播放');
 					});
 					innerAudioContext2.onEnded(() => {
 						this.isPlay = 2;

 						innerAudioContext2.pause();
 						// this.$sun.toast("音频播放完成");
 						console.log('音频播放结束：');
 					});
 					innerAudioContext2.onError(err => {
 						innerAudioContext2.destroy();
 						console.log('播放音频出错：', err);
 					});
 				} else {
 					this.isPlay = 2;
 					innerAudioContext2.pause();
 					innerAudioContext2.onPause(() => {
 						console.log('暂停播放');
 					});
 					console.log('暂停播放');
 				}
 			},
 			payNow() {

 				// this.multiLensList[this.selIndex].title = this.selIndexName
 				this.$set(this.multiLensList[this.selIndex], 'title', this.selIndexName);

 				this.form.lens_str[this.selIndex].name = this.selIndexName

 				setTimeout(() => {
 					this.selIndexName = ''
 					this.$refs.serviceItemsPopup.close()
 				}, 200)

 			},
 			edit(index) {
 				this.selIndex = index

 				this.$refs.serviceItemsPopup.show({
 					anim: 'bottom',
 					position: 'bottom',
 					shadeClose: false, //false使用户不能点击其它关闭页面
 					topclose: false,
 					zIndex: 99999
 				});
 			},


 			closeWriting() {
 				this.$refs.copywritingNum.close()
 			},
 			copywritingBtn() {
 				this.$set(this.copyTypeInfo.content, this.editIndex, this.copywriting);
 				// this.copyTypeInfo.content[this.editIndex]=this.copywriting;
 				this.form.content = this.copyTypeInfo.content
 				this.$refs.copywritingNum.close()

 			},
 			editFn(item, index) {
 				console.log(item)
 				this.$refs.copywritingNum.show({
 					anim: 'bottom',
 					position: 'bottom',
 					shadeClose: false, //false使用户不能点击其它关闭页面
 					topclose: false,
 					zIndex: 99999
 				});


 				this.copywriting = item
 				this.editIndex = index

 			},
 			delFn(index) {
 				uni.showModal({
 					title: '文案删除',
 					content: '是否要删除改文案',
 					success: async (res) => {
 						if (res.confirm) {
 							this.copyTypeInfo.content.splice(index, 1);
 							this.form.content = this.copyTypeInfo.content
 						} else if (res.cancel) {

 						}
 					}
 				});
 			},
 			async folderPageFn(list) {
 				// 查询 文件名字
 				const result = await this.$http.post({
 					url: this.$api.folderPage,
 					data: {
 						uid: uni.getStorageSync('uid'),
 						type: 1,
 						page: 1,
 						psize: 30,

 					}

 				});
 				if (result.errno == 0) {
 					console.log(result.data)

 					if (this.form.mode == 2) {
 						this.multiLensList.forEach((item, index) => {

 							let res = result.data.list.find(item1 => item.folder_id == item1.id)
 							console.log(res)
 							if (res) {
 								this.multiLensList[index].name = res.name
 								// result.data.list.forEach((item, indexs) => {
 								// 	this.multiLensList[indexs].name = result.data.list[indexs].name
 								// })
 							} else {
 								this.multiLensList[index] = [{
 									id: '',
 									name: '',
 									file_id: ''
 								}]
 								this.form.lens_str[index] = {
 									folder_id: '',
 									name: '',
 									file_id: undefined
 								}
 							}

 							this.multiLensList[index].title = this.form.lens_str[index].name

 						})


 					} else {
 						result.data.list.forEach((item, index) => {



 							if (item.id == this.form.resource_folder_id) {
 								this.singleLensObj.title = result.data.list[index].name
 							}


 							if (!this.singleLensObj.title) {
 								this.form.resource_folder_id = ''
 							}

 						})
 					}








 				} else {

 					this.$sun.toast(result.message)
 				}
 			},

 			async trialListening() {
 				console.log(this.copyTypeInfo.content)

 				console.log(Array.isArray(this.copyTypeInfo.content))

 				const result = await this.$http.post({
 					url: this.$api.aiComposite,
 					data: {
 						uid: uni.getStorageSync('uid'),
 						voice: this.form.dub_value,
 						content: this.copyTypeInfo.content,
 						task_id: this.copyTypeInfo.id,
 						type: 2
 					}

 				});
 				if (result.errno == 0) {
 					console.log(result.data)
 					this.form.dub = result.data

 					this.form.id = this.copyTypeInfo.id



 				} else {

 					this.$sun.toast(result.message)
 				}
 			},

 			nextPage() {
 				// console.log(111)
 				if (this.queryPage.psize * this.queryPage.page >= this.total) {
 					return this.$sun.toast('亲 没有更多了~', 'none')
 				} else {
 					this.queryPage.page += 1
 					console.log('掉接口')
 				}
 			},
 			async stickersListFn() {
 				const result = await this.$http.get({
 					url: this.$api.stickersList,
 					data: JSON.stringify({
 						page: 1,
 						limit: 10
 					})

 				});
 				if (result.errno == 0) {
 					console.log(result.data)
 					this.stickersList = result.data

 					if (this.form.sticker_value) {

 						let index = this.stickersList.findIndex((item) => {
 							return item.stickersUrl == this.form.sticker_value
 						})
 						console.log(index)
 						if (index == -1) {
 							this.stickerActive = 0
 						} else {
 							this.stickerActive = index
 						}


 					} else {
 						this.form.sticker_value = result.data[0].stickersUrl
 					}


 					// this.$sun.toast(result.message)

 				} else {

 					this.$sun.toast(result.message)
 				}
 			},
 			async captionListFn() {
 				const result = await this.$http.get({
 					url: this.$api.captionList,

 				});
 				if (result.errno == 0) {
 					console.log(result.data)
 					this.captionList = result.data

                   if(this.form.title_open||this.form.subtitle_open){
                   	 this.form.caption_open = true
                   }
                   

 					if (this.form.caption_value) {

 						let index = this.captionList.findIndex((item) => {
 							return item.id == this.form.caption_value.id
 						})
 						console.log(index, 'caption_valueID')
 						if (index == -1) {
 							this.titleStyleActive = 0
 						} else {
 							this.titleStyleActive = index
 						}


 					} else {
 						this.form.caption_value = {
 							title: JSON.parse(result.data[0].title),
 							captions: JSON.parse(result.data[0].captions),
 							id: result.data[0].id
 						}

 					}



 					// this.$sun.toast(result.message)

 				} else {

 					this.$sun.toast(result.message)
 				}
 			},
 			async transitionListFn() {
 				const result = await this.$http.get({
 					url: this.$api.transitionList,

 				});
 				if (result.errno == 0) {
 					console.log(result.data)
 					this.transitionList = result.data

 					if (this.form.transitions_value) {

 						let index = this.transitionList.findIndex((item) => {
 							return item.subtype == this.form.transitions_value
 						})
 						console.log(index)

 						if (index == -1) {
 							this.tiePaperActive = 0
 						} else {
 							this.tiePaperActive = index
 						}


 					} else {
 						this.form.transitions_value = result.data[0].subtype
 					}



 					// this.$sun.toast(result.message)

 				} else {

 					this.$sun.toast(result.message)
 				}
 			},
 			goRecharge() {
 				this.$sun.navGo('/pages/contactUs/memberCenter')
 			},
 			digitalHumanFn(digitalHumanArr) {
 				this.videoShowUrl = true
 				console.log(digitalHumanArr)
 				this.digitalHumanArr = JSON.parse(digitalHumanArr)

 				this.avatarIdArr = this.digitalHumanArr.map((item) => {
 					return item.id
 				})

 				this.form.avatar_id = this.avatarIdArr.length == 1 ? this.avatarIdArr[0] : this.avatarIdArr.join(',');
 				console.log(this.form.avatar_id)


 			},
 			otherFuns(groupArr) {
 				console.log(groupArr)
 				if (this.tabIndex == 2) {
 					this.multiLensList[JSON.parse(groupArr).selIndex].name = JSON.parse(groupArr).title
 					this.multiLensList[JSON.parse(groupArr).selIndex].id = JSON.parse(groupArr).projectId
 					this.multiLensList[JSON.parse(groupArr).selIndex].file_id = JSON.parse(groupArr).file_id

 					console.log(this.multiLensList)
 					this.multiLensList = this.multiLensList

 					this.form.lens_str = this.multiLensList.map((item, index) => {
 						return {
 							folder_id: item.id,
 							name: '镜头' + (Number(index) + 1),
 							file_id: item.file_id
 						}
 					})
 					this.form.resource_folder_id = ''


 				} else {
 					console.log(groupArr)
 					this.singleLensObj = JSON.parse(groupArr)
 					this.form.resource_folder_id = this.singleLensObj.projectId
 					this.form.lens_str = []
 				}




 			},
 			delMusicList() {
 				this.form.bgm = ''
 				this.form.bgm_id = ''
 				this.form.bgm_url = ''
 				this.musicObj = {}
 				this.showMusic = false

 			},
			
 			aiDubbingFuns(item) {
 				this.aiDubbingObj = JSON.parse(item).aiDubbingObj
 				console.log(this.aiDubbingObj)

 				this.form.dub_url = this.aiDubbingObj.voiceUrl;
 				this.form.dub_voice = this.aiDubbingObj.voiceName;
 				this.form.dub_value = this.aiDubbingObj.voice;

 				this.form.audio_type = this.aiDubbingObj.audio_type;

 				innerAudioContext2.src = this.aiDubbingObj.voiceUrl;
 				this.$nextTick(() => {
 					setTimeout(() => {
 						console.log(innerAudioContext2.duration)
 						this.$set(this.aiDubbingObj, 'duration', innerAudioContext2.duration);
 					}, 500)
 				})

 				this.trialListening()
 			},
 			musicFuns(item) {
 				this.isPlayVideo = 2;
 				this.showMusic = true
 				this.musicObj = JSON.parse(item).musicObj
 				console.log(this.musicObj)

 				this.form.bgm = this.musicObj.play_url.uri

 				this.form.bgm_volume = JSON.parse(item).bgm_volume

 				this.form.bgm_id = this.musicObj.title

 			},


 			selSolder(index, mode) {

 				this.$sun.navGo('/pagesA/creatCenter/material/SelmaterialCenter', {
 					index: index,
 					type: 1,
 					mode: mode
 				})
 			},
 			//账号状态
 			bindPickerChange2(e) {
 				console.log("---->", e);

 			},
 			navBack() {
 				uni.showModal({
 					title: '退出关键词创作',
 					content: '是否要退出关键词创作',
 					success: async (res) => {
 						if (res.confirm) {
 							this.$sun.navBack()

 						} else if (res.cancel) {

 						}
 					}
 				});


 			},
 			async videoNumBtn() {
 				this.templateTpo()

 				if (this.form.mode != 3) {
 					if (!this.form.title_value && this.form.title_open) {

 						this.$sun.toast('请输入视频标题', 'none')
 						return
 					}
 					if (!this.form.video_count) {

 						this.$sun.toast('请输入视频数量', 'none')
 						return
 					}

 					if (this.videoNum < this.form.video_count) {

 						this.$sun.toast('已超当前生成最大数量', 'none')
 						return
 					}
 				}


 				if (!this.form.title_open) {


 					this.form.title_value = ''

 				}
 				if (!this.form.transitions_open) {
 					this.form.transitions_value = ''
 				}
 				if (!this.form.sticker_open) {
 					this.form.sticker_value = ''
 				}
 				if (!this.form.caption_open) {
 					this.form.caption_value =''
 				}
				if (!this.form.subtitle_open) {
					this.form.subtitle_open =false
				}
				
 				if (this.form.mode == 3) {


 					if (this.videoNum < this.form.video_count) {

 						this.$sun.toast('已超当前生成最大数量', 'none')
 						return
 					}

 				}
 				console.log({
 					...this.form,
 					sticker_open: this.form.sticker_open ? 1 : 0,
 					caption_open: this.form.caption_open ? 1 : 0,
 					transitions_open: this.form.transitions_open ? 1 : 0,
 					title_open: this.form.title_open ? 1 : 0,
					subtitle_open:this.form.subtitle_open?1:0
 				})
 				if (!this.form.bgm_volume) {
 					this.form.bgm_volume = 0.5
 				}
 				uni.showLoading({
 					title: '合成视频中...',
 					mask: true
 				});

 				const result = await this.$http.post({
 					url: this.$api.taskSubmit,
 					data: {
 						...this.form,
 						sticker_open: this.form.sticker_open ? 1 : 0,
 						caption_open: this.form.caption_open ? 1 : 0,
 						transitions_open: this.form.transitions_open ? 1 : 0,
 						title_open: this.form.title_open ? 1 : 0,
						subtitle_open:this.form.subtitle_open?1:0
 					}



 				});
 				if (result.errno == 0) {
 					uni.hideLoading()
 					console.log(result.data)
 					this.$refs.videoNum.close()
 					this.$sun.toast(result.message)
 					setTimeout(() => {
 						this.$sun.navTo('/pagesA/creatCenter/keywordCreation/keywordCreationList')
 					}, 500)


 				} else {
 					uni.hideLoading()
 					setTimeout(() => {
 						this.$sun.toast(result.message, 'none')
 					}, 200)
 				}



 			},
 			closeVideoNum() {
 				this.$refs.videoNum.close()
 			},
 			titleStyleSwitchFn(index, item) {
 				this.titleStyleActive = index
 				this.form.caption_value = {
 					title: JSON.parse(item.title),
 					captions: JSON.parse(item.captions),
 					id: item.id
 				}

 			},
 			tiePaperSwitchFn(index, item) {



 				this.tiePaperActive = index
 				this.form.transitions_value = item.subtype
 			},
 			stickerSwitchFn(index, item) {
 				this.stickerActive = index
 				this.form.sticker_value = item.stickersUrl
 			},
 			switch1Change(e, index, ts) {
 				console.log(e.detail.value, index)
 				if (index == 1) {
 			
 					this.form.title_open = e.detail.value
 					if (!e.detail.value) {
 						this.form.title_value = ''
 					}
 					if ((!this.form.title_open&&!this.form.subtitle_open)) {
 						this.switch1Change(e, 5, 'ts')
 					}else{
 						this.switch1Change({
 							detail:{
 								value:true
 							}
 						}, 5, 'ts')
 					}
 					
 				}
 				if (index == 2) {
 					this.form.transitions_open = e.detail.value
 					if (!e.detail.value) {
 						this.form.transitions_value = ''
 					}else{
 						this.form.transitions_value = this.transitionList[0].subtype
 					}
 				}
 				if (index == 3) {
 					this.form.sticker_open = e.detail.value
 					if (!e.detail.value) {
 						this.form.sticker_value = ''
 					}else{
 						this.form.sticker_value = this.stickersList[0].stickersUrl
 					}
 				}
 				if (index == 4) {
 					this.form.subtitle_open = e.detail.value
 					if (!e.detail.value) {
 						this.form.subtitle_open = false
 						
 						
 					}
 					
 					if ((!this.form.title_open&&!this.form.subtitle_open)) {
 						this.switch1Change(e, 5, 'ts')
 					}else{
 						this.switch1Change({
 							detail:{
 								value:true
 							}
 						}, 5, 'ts')
 					}
 				}
 				if (index == 5) {
 				
 				
 					this.form.caption_open = e.detail.value
 					if (!e.detail.value) {
 						this.form.caption_value = {}
 					}else{
 						this.form.caption_value = {
 							title: JSON.parse(this.captionList[0].title),
 							captions: JSON.parse(this.captionList[0].captions),
 							id: (this.captionList.id)
 						}
 					}
 					
 				
 				}
 			},
 			previousStep(index) {
 				this.current = index - 1
 			},
 			closeWriteOffIcon() {
 				this.selIndexName = ''
 				this.$refs.serviceItemsPopup.close()
 			},
 			closeWriteOffIcons() {
 				this.$refs.customizePop.close()
 			},
 			CbutCk() {
 				// 当前为是什么模式
 				if (this.form.mode == 1) {
 					this.getVideoCountFn(this.form.resource_folder_id)
 				} else {
 					this.getVideoCountFnM()
 				}
 				this.$refs.videoNum.show({
 					anim: 'bottom',
 					position: 'bottom',
 					shadeClose: false, //false使用户不能点击其它关闭页面
 					topclose: false,
 					zIndex: 99999
 				});
 			},
 			//保存到相册
 			async longpress(urls) {


 				uni.showLoading({
 					title: '下载中',
 					mask: true,
 				});
 				uni.downloadFile({
 					url: urls,
 					success: res => {
 						if (res.statusCode === 200) {
 							uni.saveVideoToPhotosAlbum({
 								filePath: res.tempFilePath,
 								success: r => {
 									uni.hideLoading();

 									this.$sun.toast('保存相册成功');
 								},
 								fail: e => {
 									// console.log(res);
 									if (e.errMsg ==
 										'saveVideoToPhotosAlbum:fail auth deny'
 									) {

 										uni.showModal({
 											title: '您需要授权相册权限',
 											success(res) {
 												if (res
 													.confirm) {
 													uni.openSetting({
 														success(
 															res
 														) {},
 														fail(
 															res
 														) {
 															// console.log(res);
 														}
 													});
 												}
 											}
 										});
 									} else if (e.errMsg ==
 										'saveVideoToPhotosAlbum:fail file not exists'
 									) {

 										uni.hideLoading();
 										this.$sun.toast(
 											'保存失败,视频文件不存在!', 'none'
 										);
 									} else {

 										uni.hideLoading();
 										console.log('err==>', e);
 										this.$sun.toast('保存失败',
 											'error');
 									}
 								}
 							});
 						} else {

 							uni.hideLoading();
 							this.$sun.toast('下载失败', 'error');
 						}
 					},
 					fail: err => {
 						uni.hideLoading();
 						this.$sun.toast(err, 'error');
 						this.isWhether = true;
 					}
 				});


 			},
 			delMultiLens(index) {

 				uni.showModal({
 					title: '是否确定要删除',
 					content: '删除内容，镜头' + Number(index + 1) + '，删除后无法恢复',
 					success: async (res) => {
 						if (res.confirm) {

 							this.multiLensList.splice(index, 1);
 						} else if (res.cancel) {

 						}
 					}
 				});

 			},
 			AddLens() {
 				let info = {
 					id: 1,
 					name: ''
 				};
 				this.multiLensList.push(info);
 			},
 			tabSwitch(index) {
 				this.tabIndex = index
 				this.form.mode = index

 				if (index == 1) {
 					// 多镜头
 					this.multiLensList = [{
 						id: 0,
 						name: ''
 					}]
 					this.form.lens_str = []
 					// 数字人口播
 					this.form.avatar_id = '',
 						// 数字人音色id
 						this.form.voice_id = '',
 						// 数字人声音id
 						this.form.sound_id = ''



 					this.form.avatar_id = ''

 					this.form.voice_id = ''

 					this.digitalHumanArr = []

 					this.aiTimbreObj = {}

 					this.videoShowUrl = false

 					this.avatarIdArr = []




 				} else if (index == 2) {
 					this.singleLensObj = {}
 					this.form.resource_folder_id = ''

 					// 数字人口播
 					this.form.avatar_id = '',
 						// 数字人音色id
 						this.form.voice_id = '',
 						// 数字人声音id
 						this.form.sound_id = ''

 					this.form.avatar_id = ''

 					this.form.voice_id = ''

 					this.digitalHumanArr = []

 					this.aiTimbreObj = {}
 					this.videoShowUrl = false
 					this.avatarIdArr = []
 				} else {
 					// 多镜头
 					this.multiLensList = [{
 						id: 0,
 						name: ''
 					}]
 					this.form.lens_str = []



 					this.singleLensObj = {}
 					this.form.resource_folder_id = ''


 				}
 			},
 			customizePopFn() {
 				this.$refs.customizePop.close()
 			},
 			async but(index) {

 				//  判断是否为多镜头是多镜头 那么最低需要选择4-9个镜头
 				if (index == 1) {
 					if (this.form.mode == 3) {

 						if (!this.form.avatar_id) {
 							this.$sun.toast('请选择数字人形象', 'none')
 						} else if (!this.form.voice_id) {
 							this.$sun.toast('请选择数字人音色', 'none')
 						} else {
 							// 首先判断当前 扣多少点




 							this.totNum = 0


 							let totalDeduction
 							this.form.content.forEach((item, index) => {



 								if (item.length < 100) {
 									totalDeduction = this.tallySet.sound_tally; // 如果次数小于100，直接扣50点
 								} else {
 									totalDeduction = (Math.ceil(item.length / 100) * this.tallySet
 										.sound_tally);
 								}

 								this.totNum = totalDeduction + Number(this.totNum)
 							})

 							if (Number(this.user.balance) <= Number(this.totNum)) {
 								this.$sun.toast('每一百字扣 ' + this.tallySet.sound_tally + '算力,当前算力不足无法提交', 'none')
 								return
 							}




 							uni.showLoading({
 								title: '提交任务中...',
 								mask: true
 							});

 							console.log(this.form)
 							const result = await this.$http.post({
 								url: this.$api.soundSave,
 								data: {
 									uid: uni.getStorageSync("uid"),
 									voice_id: this.form.voice_id,
 									type: 2,
 									task_id: this.copyTypeInfo.id,
 									msg: this.form.content
 								}
 							});
 							if (result.errno == 0) {
 								console.log(result.data)
 								if (result.data) {
 									uni.hideLoading()
 									this.form.sound_id = result.data

 									this.$refs.videoNum.show({
 										anim: 'bottom',
 										position: 'bottom',
 										shadeClose: false, //false使用户不能点击其它关闭页面
 										topclose: false,
 										zIndex: 99999
 									});

 									this.videoNum = Number(this.digitalHumanArr.length) * Number(this.form.content
 										.length)


 									// this.videoNumBtn()
 								}
 							} else {
 								uni.hideLoading()
 								setTimeout(() => {
 									this.$sun.toast(result.message, 'none')
 								}, 200)
 							}
 						}

 					} else {
 						
						if (this.form.audio_type == 2) {
							if (!this.form.voice_id) {
								this.$sun.toast('请选择数字人音色', 'none')
							} else {
						
								this.totNum = 0
								
								
								let totalDeduction
								this.form.content.forEach((item, index) => {
								
								
								
									if (item.length < 100) {
										totalDeduction = this.tallySet.sound_tally; // 如果次数小于100，直接扣50点
									} else {
										totalDeduction = (Math.ceil(item.length / 100) * this.tallySet
											.sound_tally);
									}
								
									this.totNum = totalDeduction + Number(this.totNum)
								})
								
								if (Number(this.user.balance) <= Number(this.totNum)) {
									this.$sun.toast('每一百字扣 ' + this.tallySet.sound_tally + '算力,当前算力不足无法提交', 'none')
									return
								}
								
								uni.showLoading({
									title: '提交任务中...',
									mask: true
								});
						
								console.log(this.form)
								const result = await this.$http.post({
									url: this.$api.soundSave,
									data: {
										uid: uni.getStorageSync("uid"),
										voice_id: this.form.voice_id,
										type: 2,
										task_id: this.copyTypeInfo.id,
										msg: this.form.content
									}
								});
								if (result.errno == 0) {
									console.log(result.data)
									if (result.data) {
										this.form.sound_id = result.data
										uni.hideLoading()
						
						
						
								
						
						
						
						
									}
								} else {
									uni.hideLoading()
									this.$sun.toast(result.message, 'none')
								}
							}
						} else {
							if (!this.form.dub) {
								this.$sun.toast('请选择ai配音', 'none')
								return
							}
						}
						
						
						
						
					
 						if (this.form.mode == 2) {
 							if (this.form.lens_str.length < 4 || this.form.lens_str.length > 9) {
 								this.$sun.toast('最低需添加4个镜头组，最多不超过8个镜头组、')
 								return
 							} else {
 								const indexesWithoutFileId = this.form.lens_str
 									.map((item, index) => item.file_id === undefined ? index + 1 : -1)
 									.filter(index => index !== -1);



 								console.log(indexesWithoutFileId)

 								if (indexesWithoutFileId.length) {
 									this.$sun.toast('镜头组' + indexesWithoutFileId + '有问题请重新选择')
 								} else {
 									this.current = index + 1
 								}

 							}
 						} else if (this.form.mode == 1) {
 							if (!this.form.resource_folder_id) {
 								this.$sun.toast('请选择素材', 'none')
 							} else {
 								this.current = index + 1
 							}
 						} else {
 							this.current = index + 1
 						}
 					}
 				} else if (index == 0) {


 					if (!this.copyTypeInfo.content.length) {
 						this.$sun.toast('请输入视频提取文案', 'none')
 						return
 					} else {
 						this.current = index + 1
 					}
 					if (this.form.dub) {
 						this.trialListening()
 					}
 				} else {



 				}
 			},
 			changeMusicFn() {
 				this.$sun.navGo('/pagesA/creatCenter/piecemeal/changeMusic')
 			},
 			aiDubbing() {
 				this.$sun.navGo('/pagesA/creatCenter/piecemeal/AiDubbing')
 			},
 			// 复制订单号
 			paste(item) {
 				uni.setClipboardData({
 					data: item,
 					success: () => {
 						// 复制成功的回调
 						uni.showToast({
 							title: '复制文案成功',
 							icon: 'success'
 						});
 					},
 					fail: (err) => {
 						console.log(err)
 						// 复制失败的回调
 						uni.showToast({
 							title: '复制文案失败',
 							icon: 'error'
 						});
 					}
 				});


 			},


 		}
 	}
 </script>

 <style lang="less">
 	.v-home-page {
 		background-image: (var(--bg-image));
 		background-repeat: no-repeat;
 		background-size: contain;
 		position: relative;
 		height: 100vh;
 		padding: 20rpx;

 		::v-deep .uv-steps-item__wrapper {
 			background-color: transparent !important
 		}

 		.digitalHumanImg {
 			/* 矩形 5873 */
 			width: 254.48rpx;
 			height: 454rpx;
 			border-radius: 20rpx;
 			margin-right: 20rpx;

 		}

 		.upload-img-cls {
 			width: 500rpx;
 			position: relative;


 			z-index: 99;
 		}

 		.bordColor {
 			border: 8rpx solid transparent;
 			/* 必须设置 border 属性 */
 			// width: 400rpx;
 			// height: 400rpx;
 			border-image: linear-gradient(45deg, rgba(255, 218, 148, 1), rgba(179, 130, 255, 1)) 1;
 			border-radius: 20rpx;
 			/* 设置圆角 */

 		}


 		#barTitle {
 			position: fixed;
 			width: 750rpx;
 			top: 0;
 			left: 0;
 			background: #fff;
 			color: #000000;
 			text-align: center;
 			font-weight: bold;
 			z-index: 9999
 		}

 		#barTitle>text {
 			position: absolute;
 			left: 0;
 			right: 0;
 			bottom: 20rpx
 		}

 		.titleStyleActive {
 			width: 158rpx;
 			height: 250.02rpx;
 			box-sizing: border-box;
 			border: 2rpx solid #9235FF;
 			margin-right: 10rpx;
 			margin-bottom: 10rpx;

 		}

 		.templateCenterImg {
 			width: 158rpx;
 			height: 250.02rpx;
 			margin-right: 10rpx;
 			margin-bottom: 10rpx;
 		}

 		.videoStyle {
 			// width: 720rpx;
 			// height: 1316rpx;
 			border-radius: 20rpx;
 			padding: 20rpx;

 			background: rgb(255, 255, 255);

 			.videoTitle {
 				width: 680rpx;
 				height: 76rpx;
 				border-radius: 20rpx;

 				background: rgb(242, 242, 242);
 			}

 			.tiePaper {
 				width: 135.06rpx;
 				height: 132.06rpx;
 				box-sizing: border-box;
 				border: 2rpx solid rgb(239, 239, 239);
 				background: rgb(255, 255, 255);
 				margin: 0 42rpx 20rpx 0;
 				padding: 10rpx;

 				.tiePaperImg {
 					width: 95.22rpx;
 					height: 89.28rpx;
 				}

 			}


 			.tiePaperActive {
 				margin: 0 42rpx 20rpx 0;
 				padding: 10rpx;
 				width: 135.06rpx;
 				height: 132.06rpx;
 				box-sizing: border-box;
 				border: 2rpx solid #9235FF;
 				background: rgb(255, 255, 255);

 				.tiePaperImg {
 					width: 95.22rpx;
 					height: 89.28rpx;
 				}
 			}
 		}



 		.matrix-20 {
 			width: 18rpx;
 			height: 30rpx;
 			margin-left: auto;
 		}

 		.upload-bj-cls {
 			position: absolute;
 			top: 0;
 			left: 0;
 			right: 0;
 			bottom: 0;
 			margin: auto;

 			::v-deep .uni-icons {
 				position: relative;
 				right: 0;
 				z-index: 9999
 			}

 			image {
 				width: 84rpx;
 			}

 			view {
 				color: rgb(141, 84, 242);
 				font-size: 32rpx;
 				font-weight: 600;
 				margin: 26rpx 0 14rpx;
 			}

 			text {
 				color: rgb(153, 153, 153);
 				font-size: 24rpx;
 				font-weight: 400;
 			}
 		}


 		.list-public {
 			padding: 30rpx;
 			margin: 0;

 			.AiDubbing {

 				width: 128rpx;
 				height: 138.26rpx;
 				border-radius: 12rpx;
 				color: #7200FF;

 				background: rgb(249, 248, 255);

 				.aiDubbingImg {
 					width: 45rpx;
 					height: 45rpx;
 				}
 			}

 			.input-name {
 				width: 610rpx;
 				padding: 20rpx;
 				border: 2rpx solid #d9d9d9;
 				border-radius: 10rpx;
 			}

 			.delImg {
 				width: 40rpx;
 				height: 40rpx;
 				position: absolute;
 				z-index: 9999;
 				left: 20rpx;
 				top: 20rpx;




 			}

 			.red-dot {
 				color: #ff0000;
 				margin-left: 10rpx;
 			}

 			.multiLensList {
 				// width: 688rpx;
 				// height: 116rpx;
 				padding: 20rpx 20rpx;
 				border-radius: 20rpx;

 				background: rgb(248, 248, 248);

 				.icon {
 					width: 35rpx;
 					height: 35rpx;
 				}
 			}

 			.multiLensImg {
 				width: 45.84rpx;
 				height: 50rpx;
 			}
 		}

 		.singleLens {
 			border-radius: 20rpx 40rpx 20rpx 0rpx;
 			background: linear-gradient(180.00deg, rgb(246, 238, 255), rgba(244, 245, 247, 0) 100%);
 			// background: linear-gradient(180.00deg, rgb(250, 243, 227), rgba(250, 243, 227, 0) 100%);
 			width: 354rpx;
 			position: relative;
 			left: 3rpx;
 			height: 113.18rpx;
 		}

 		// .type-2 {
 		// 	width: 376rpx;
 		// 	text-align: center;
 		// 	border-radius: 20rpx;
 		// 	background: rgba(23, 23, 23, 1);
 		// 	color: #FFF;
 		// 	padding: 38rpx 0 30rpx;
 		// }

 		// .type-1 {
 		// 	width: 374rpx;
 		// 	text-align: center;
 		// 	border-radius: 20rpx;
 		// 	background: linear-gradient(180.00deg, rgba(32, 255, 134, 1), rgba(0, 255, 229, 1) 100%);
 		// 	color: rgba(0, 0, 0, 1);
 		// 	padding: 38rpx 0 30rpx;
 		// }

 		.multiLens {
 			width: 344rpx;
 			height: 113.18rpx;
 			border-radius: 40rpx 30rpx 0rpx 20rpx;
 			position: relative;
 			left: -3rpx;
 			background: linear-gradient(180.00deg, rgb(246, 238, 255), rgba(244, 245, 247, 0) 100%);
 		}

 		.digitalPopulationBroadcast {
 			width: 354rpx;
 			height: 113.18rpx;
 			border-radius: 40rpx 20rpx 40rpx 20rpx;
 			position: relative;
 			left: -3rpx;
 			background: linear-gradient(180.00deg, rgb(246, 238, 255), rgba(244, 245, 247, 0) 100%);
 			// background: linear-gradient(180.00deg, rgb(231, 234, 255), rgba(236, 247, 244, 0.0) 100%);
 		}

 		.defaultLensRight {
 			width: 354rpx;
 			height: 113.18rpx;
 			border-radius: 20rpx 20rpx 0rpx 20rpx;
 			position: relative;
 			left: -3rpx;
 			background: linear-gradient(180.00deg, #fff, rgba(244, 245, 247, 0) 100%);
 		}

 		.defaultLensLeft {
 			width: 354rpx;
 			height: 113.18rpx;
 			border-radius: 20rpx 20rpx 0rpx 20rpx;
 			position: relative;
 			left: 3rpx;
 			z-index: 999;
 			background: linear-gradient(180.00deg, #fff, rgba(244, 245, 247, 0) 100%);
 		}

 		.line {
 			/* 矩形 6048 */
 			width: 70rpx;
 			height: 10rpx;
 			border-radius: 188rpx;

 			background: rgba(179, 130, 255, 1);
 		}

 		.list-public2 {
 			// margin: 0 20rpx 20rpx;
 			margin-top: 30rpx;
 			padding: 20rpx 20rpx;
 			position: relative;
 			border-radius: 20rpx;
 			background: rgb(250, 250, 250);
 		}

 		.opacity5 {
 			opacity: 0.5;
 		}

 		.img-97 {
 			width: 70%;
 			height: 70%;
 			animation: rotate 1.5s linear infinite; //图片旋转
 		}

 		@keyframes rotate {
 			from {
 				transform: rotate(0deg);
 			}

 			to {
 				transform: rotate(360deg);
 			}
 		}


 		.r-play {
 			margin-right: 30rpx;
 			width: 72rpx;
 			height: 72rpx;
 			border-radius: 100rpx;
 			background: linear-gradient(180deg, rgb(136, 118, 230), rgb(176, 136, 248) 100%);
 			margin-left: auto;
 		}


 		.img-94 {
 			width: 100%;
 			height: 100%;
 		}

 		.r-date {
 			margin-top: 20rpx;
 			color: rgb(153, 153, 153);
 			font-size: 26rpx;
 		}

 		.r-name {
 			color: rgb(51, 51, 51);
 			font-size: 32rpx;
 			font-weight: 600;
 		}

 		.try-listening-cls {
 			color: rgb(255, 255, 255);
 			font-size: 32rpx;
 			border-radius: 180rpx;
 			background: rgb(93, 124, 252);
 			padding: 8rpx 22rpx;
 		}

 		.videoCopywriting {
 			margin-top: 60rpx;


 			box-sizing: border-box;
 			border: 2rpx solid rgb(249, 249, 249);
 			border-radius: 20rpx;
 			padding: 20rpx;

 			background: rgb(255, 255, 255);

 			.editImg {
 				width: 32.18rpx;
 				height: 32.18rpx;
 			}

 			.copyImg {
 				width: 25.34rpx;
 				height: 25.34rpx;
 			}



 		}

 		.backgroundMusic {

 			width: 699.98rpx;
 			height: 152.84rpx;
 			padding: 19rpx;
 			box-sizing: border-box;
 			border: 2rpx solid rgb(249, 249, 249);
 			border-radius: 20rpx;

 			background: rgb(255, 255, 255);

 			.musicImg {
 				width: 111.06rpx;
 				height: 111.06rpx;
 			}

 			.delmusicImg {
 				width: 30rpx;
 				height: 30rpx;
 				margin-left: 10rpx;
 			}

 			.downloadImg {
 				width: 28rpx;
 				height: 28rpx;
 			}

 			.changeMusic {
 				border-radius: 20rpx;
 				width: 187.06rpx;
 				height: 84rpx;
 				color: #fff;
 				background: linear-gradient(82.59deg, rgb(100, 117, 255) 1.294%, rgb(116, 100, 255) 99.047%);

 				.musicImg {
 					width: 30rpx;
 					height: 30rpx;
 					margin-right: 8rpx;
 				}
 			}
 		}

 		.bgBtn {
 			z-index: 999;
 			position: fixed;
 			bottom: 0;
 			height: 192rpx;
 			width: 100%;
 			background-color: #f7f7f7;

 			.c-but {

 				font-weight: 700;

 				padding: 20rpx 40rpx;

 				// color: #ffffff;
 				width: 61%;
 				position: fixed;
 				bottom: 40rpx;
 				left: 32%;
 				border: none;

 				z-index: 999;


 				border-radius: 20rpx;
 				margin: 20rpx;
 				text-align: center;
 				font-size: 32rpx;
 				height: 100rpx;
 				margin-top: 30rpx;
 				color: #ffffff;
 				background: linear-gradient(90deg, #6475FF, #7464FF 100%);
 			}

 			.c-save {
 				font-weight: 700;

 				padding: 20rpx 40rpx;

 				// color: #ffffff;
 				width: 29%;
 				position: fixed;
 				bottom: 40rpx;
 				left: 0%;
 				border: none;

 				z-index: 999;


 				border-radius: 20rpx;
 				margin: 20rpx;
 				text-align: center;
 				font-size: 32rpx;
 				height: 100rpx;
 				margin-top: 30rpx;
 				color: #000000;
 				background: #fff;
 			}
 		}



 		.serviceItemsContain {
 			padding: 0rpx 30rpx 30rpx 30rpx;
 			background-color: #fff;

 			height: auto;
 			overflow-x: auto;

 			.textarea-box {
 				height: 400rpx;
 				padding: 20rpx 0;
 			}

 			.PublishTags {
 				z-index: 99;
 				margin-top: 10rpx;
 				height: 102rpx;
 				border-radius: 20rpx;
 				color: #fff;


 				bottom: 20rpx;
 				background: rgb(120, 93, 246);
 			}

 			.myNmae {

 				background-color: #fff;
 				min-width: 50rpx;

 				.avatar {
 					width: 84rpx;
 					height: 84rpx;
 				}

 				input {
 					text-align: left;
 				}

 				.uni-input {

 					height: 100rpx;
 				}

 				.uni-inputsa {
 					width: 100%;
 					height: 90rpx;
 					border-radius: 20rpx;
 					background: rgb(245, 245, 245);
 					margin: 20rpx 0;
 					padding: 0rpx 20rpx;
 				}

 				.uni-inputs {
 					text-align: left !important;
 				}

 				.backgroundImg {

 					height: 154rpx;


 				}

 			}





 			.top {
 				padding: 30rpx 0;
 				width: 100%;

 				text {
 					color: rgb(0, 0, 0);
 					font-size: 36rpx;
 					font-weight: 400;
 				}
 			}

 		}
 	}
 </style>